<template>
  <div>
    <PageTitleSearch
      :title="title"
      :hotelList="hotelList"
      :currentHotel="currentHotel"
      v-model:lastMonth="lastMonth"
      :currentAcc="currentAcc"
      @hotel-change="handleSelectChange"
      @date-change="handleDateSelect"
      @acc-change="handleAccSelect"
    />
    <div class="main-content">
      <div class="total-wrap">
        <div class="card-double">
          <div class="card-point">
            <span class="card-title">住店客人数</span>
            <div class="card-num-wrap"
              ><span class="unline">{{ currentAcc === 'month' ? infoData.guests : infoDataY.guests }} </span>
              <span class="card-unit">人</span>
            </div>
          </div>
        </div>
        <div class="card-solid-line"></div>
        <div class="card-double">
          <div class="card-point">
            <span class="card-title">已售房数量</span>
            <div class="card-num-wrap"
              ><span class="unline">{{ currentAcc === 'month' ? infoData.sroom : infoDataY.sroom }} </span>
              <span class="card-unit">间</span>
            </div>
          </div>
        </div>
        <div class="card-solid-line"></div>
        <div class="card-double">
          <div class="card-point">
            <span class="card-title">餐饮用餐人数</span>
            <div class="card-num-wrap"
              ><span class="unline">{{ currentAcc === 'month' ? infoData.dinners : infoDataY.dinners }}</span>
              <span class="card-unit">人</span>
            </div>
          </div>
        </div>
      </div>
      <a-row :gutter="[12, 12]">
        <a-col :span="4" v-for="item in displayData" :key="item.name">
          <FlexCard class="card-custom" :loading="loading" :dataList="[item]" :is-center-title="true" :title="item.name">
            <div class="card-wrap" style="margin: 40px 0 0 0">
              <div class="card-details-title">实际</div>
              <div class="card-circle">{{ item.value }}</div>
              <div class="card-small-circle">
                <div>
                  <div class="small-circle-title">平均</div>
                  <div class="small-circle-value"> {{ item.average }}</div>
                </div>
              </div>
            </div>
            <div class="card-wrap" style="margin: 10px 0">
              <div class="card-details-title">同比</div>
              <div class="card-circle circle-year-bg">{{ item.onYear }}</div>
              <div class="card-small-circle">
                <div>
                  <div class="small-circle-title">平均</div>
                  <div class="small-circle-value"> {{ item.average }}</div>
                </div>
              </div>
            </div>
            <div class="card-wrap" style="margin: 10px 0 40px 0">
              <div class="card-details-title">同比</div>
              <div class="card-circle circle-qoq-bg">{{ item.qoq }}</div>
              <div class="card-small-circle">
                <div>
                  <div class="small-circle-title">平均</div>
                  <div class="small-circle-value"> {{ item.average }}</div>
                </div>
              </div>
            </div>
          </FlexCard>
        </a-col>
      </a-row>
    </div>
    <ReportRemarkCard :loading="loading" v-if="reportCode" title="说明" :reportCode="reportCode" :reportName="reportName" />
  </div>
</template>
<script>
  import dayjs from 'dayjs';
  import * as MathUtil from '/@/utils/MathUtil';
  import * as Constant from '@/utils/Constant';
  import { defHttp } from '/@/utils/http/axios';
  import * as Color from '/@/utils/ColorDefault';
  import FlexCard from '@/views/applications/ui/FlexCard.vue';
  import ReportRemarkCard from '@/views/applications/ui/ReportRemarkCard.vue';
  import PageTitleSearch from '@/views/applications/ui/PageTitleSearch.vue';

  const REPORT_NAME = '服务效率/天';
  const REPORT_CODE = 'hotel-month-single-eff';

  export default {
    name: REPORT_NAME,

    components: {
      FlexCard,
      ReportRemarkCard,
      PageTitleSearch,
    },
    data() {
      return {
        title: '服务效率',
        currentAcc: 'month',
        currentAccName: '当月',
        accList: [
          { label: '当月', value: 'month' },
          { label: '当年', value: 'year' },
        ],
        reportCode: '',
        reportName: '',
        loading: false,
        tableHigh: { x: '100%', y: 308 },
        lastMonth: dayjs().subtract(1, 'month').format('YYYYMM'),
        hotelList: [],
        currentHotel: {},
        infoData: {
          income: 200,
          sroom: 300,
          dinners: 100,
        },
        fteData: [],
        infoDataY: '',
        fteDataY: [],
      };
    },
    computed: {
      displayData() {
        return this.currentAcc === 'month' ? this.fteData : this.fteDataY;
      },
    },
    created() {
      defHttp.get({ url: '/data/hotel/list' }, { isTransformResponse: false }).then((res) => {
        if (res.success && res.result.length > 0) {
          const dataList = res.result;
          this.hotelList = res.result.map((s) => {
            return { label: s.name, value: s.code };
          });
          const currentHotelCode = this.$route.query.hotelCode || localStorage.getItem(Constant.STORAGE_HOTEL_NAME);
          if (currentHotelCode && dataList.filter((d) => d.code === currentHotelCode).length > 0) {
            this.currentHotel = dataList.filter((d) => d.code === currentHotelCode)[0];
          } else {
            this.currentHotel = {
              code: res.result[0].code,
              name: res.result[0].name,
            };
          }
          this.hotelSel = this.currentHotel;
          this.reportCode = `${REPORT_CODE}-${this.currentHotel.code}-${this.lastMonth}`;
          this.reportName = `${REPORT_NAME}-${this.currentHotel.name}-${this.lastMonth}`;
          this.fetchData();
        }
      });
    },

    methods: {
      handleAccSelect(value) {
        this.currentAcc = value;
      },
      fetchData() {
        this.loading = true;
        Promise.all([
          defHttp.post({
            url: 'data/query',
            data: {
              labelCode: 'getHotelMonthReportEff',
              sqlParams: [
                {
                  key: 'code',
                  value: this.currentHotel.code,
                },
                {
                  key: 'month',
                  value: this.lastMonth,
                },
              ],
              pageIndex: 1,
              pageSize: 100,
            },
          }),
          defHttp.post({
            url: 'data/query',
            data: {
              labelCode: 'getHotelMonthReportAccEff',
              sqlParams: [
                {
                  key: 'code',
                  value: this.currentHotel.code,
                },
                {
                  key: 'month',
                  value: this.lastMonth,
                },
              ],
              pageIndex: 1,
              pageSize: 100,
            },
          }),
        ]).then((res) => {
          const [monthRes, yearRes] = res;
          if (monthRes.datas.success && monthRes.datas.data.length > 0) {
            const data = monthRes.datas.data[0];
            this.wrapData('month', data);
          } else {
            this.infoData = '';
            this.fteData = [];
          }
          if (yearRes.datas.success && yearRes.datas.data.length > 0) {
            const data = yearRes.datas.data[0];
            this.wrapData('year', data);
          } else {
            this.infoDataY = '';
            this.fteDataY = [];
          }
          localStorage.setItem(Constant.STORAGE_HOTEL_NAME, this.currentHotel.code);
          this.loading = false;
        });
      },
      wrapData(type, data) {
        const suffix = type === 'month' ? '' : 'Y';
        this[`infoData${suffix}`] = {
          guests: MathUtil.dot2Formatter(data.guests, 0),
          sroom: MathUtil.dot2Formatter(data.sroom, 0),
          dinners: MathUtil.dot2Formatter(data.dinners, 0),
        };
        this[`fteData${suffix}`] = [
          {
            name: 'FTE整体人服比',
            value: MathUtil.dot2Formatter((data.guests + data.dinners) / data.fte, 2),
            average: 0,
            onYear: 0,
            qoq: 0,
          },
          {
            name: 'FTE前厅人服比',
            value: MathUtil.dot2Formatter(MathUtil.safeDivide(data.guests, data.frontFte), 2),
            average: 0,
            onYear: 0,
            qoq: 0,
          },
          {
            name: 'FTE客房人服比',
            value: MathUtil.dot2Formatter(MathUtil.safeDivide(data.sroom, data.roomFte), 2),
            average: 0,
            onYear: 0,
            qoq: 0,
          },
          {
            name: 'FTE餐饮服务人服比',
            value: MathUtil.dot2Formatter(MathUtil.safeDivide(data.dinners, data.restFte), 2),
            average: 0,
            onYear: 0,
            qoq: 0,
          },
          {
            name: 'FTE餐饮厨房人服比',
            value: MathUtil.dot2Formatter(MathUtil.safeDivide(data.dinners, data.kitchenFte), 2),
            average: 0,
            onYear: 0,
            qoq: 0,
          },

          {
            name: 'FTE后台部门人服比',
            value: MathUtil.dot2Formatter(MathUtil.safeDivide(data.backends, data.backendsFte), 2),
            average: 0,
            onYear: 0,
            qoq: 0,
          },
        ];
        this[`fteRateData${suffix}`] = [
          {
            name: '去年',
            value: MathUtil.safeDivide(data.lFte, data.lIncome),
            color: Color.COLOR_WARN,
          },
          {
            name: '预算',
            value: MathUtil.safeDivide(data.fteBudget, data.incomeBudget),
            color: Color.COLOR_PURPLE,
          },
          {
            name: '实际',
            value: MathUtil.safeDivide(data.fte, data.income),
            color: Color.COLOR_BLUE,
          },
        ];
      },
      filterOption(input, option) {
        return option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0;
      },
      handleSelectChange(value) {
        this.currentHotel = {
          code: value,
          name: this.hotelList.filter((h) => h.value === value)[0].label,
        };
        this.reportCode = `${REPORT_CODE}-${this.currentHotel.code}-${this.lastMonth}`;
        this.reportName = `${REPORT_NAME}-${this.currentHotel.name}-${this.lastMonth}`;
        this.fetchData();
      },
      isMonthDisabled(current) {
        const lastMonth = dayjs().subtract(1, 'month');
        return current.isAfter(lastMonth);
      },
      handleDateSelect() {
        this.reportCode = `${REPORT_CODE}-${this.currentHotel.code}-${this.lastMonth}`;
        this.reportName = `${REPORT_NAME}-${this.currentHotel.name}-${this.lastMonth}`;
        this.fetchData();
      },
    },
  };
</script>

<style lang="less" scoped>
  .total-wrap {
    display: flex;
    align-items: center;
    // justify-content: space-between;
    background: #fff;
    border-radius: 0.55rem;
    padding: 2px 10px;
    margin-bottom: 10px;
    color: #000;
  }
  .main-content {
    padding: 12px 0;

    &-title {
      &-custom {
        color: #00b578;
      }
    }
  }
  .card-double {
    display: flex;
    justify-content: space-between;

    &-item {
      flex-basis: 48%;
    }
  }
  .card-point {
    display: flex;
    align-items: center;
    font-size: 16px;
    font-weight: 600;
  }
  .card-remark {
    font-size: 12px;
    display: flex;
    align-items: center;
    // text-align: right;
    margin-left: 10px;
  }
  .card-title {
    margin-right: 10px;
  }
  .card-num-wrap {
    display: flex;
    align-items: center;
  }
  .card-unit {
    font-size: 12px;
    padding-left: 5px;
  }
  .card-budget {
    padding-right: 5px;
  }
  .interval-area {
    margin-bottom: 12px;
  }
  .dash-line {
    border-left: 1px dashed #d9d9d9;
  }
  .title-name {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 36px;
    background: #ffffff;
    -webkit-box-shadow: 0px 5px 5px 0px rgba(25, 15, 15, 0.07);
    box-shadow: 0px 5px 5px 0px rgba(25, 15, 15, 0.07);
    border-radius: 0.5rem;
    font-size: 16px;
    font-weight: 600;
    .title-name-unit {
      font-weight: 400;
    }
  }

  .select-title-space {
    width: 200px;
    margin-right: 20px;
  }

  ::v-deep .select-title .van-cell {
    // color: hsl(217, 16%, 60%);
    font-size: 0.875rem;
    line-height: 1.25rem;
    padding: unset;
    -webkit-box-pack: end;
    -ms-flex-pack: end;
    justify-content: flex-end;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    position: relative;
    background-color: #112c4d;
  }
  .popup-right {
    width: auto;

    &-content {
      height: 800px;
      width: 318px;

      &-oprate {
        display: flex;
        padding: 16px;
        justify-content: center;

        &-item {
          width: 100%;
          margin-right: 10px;
        }

        &-item:last-child {
          margin-right: 0;
        }
      }
    }
  }

  @media @desktop {
    .main-frame-desktop-header {
      padding: 1rem;
      background: #fff;
      overflow: hidden;
    }

    ::v-deep .card-custom .ant-card-body {
      // display: flex;
      // justify-content: center;
      padding: 6px 10px 6px 10px;
      zoom: 1;
    }

    // .card-point {
    //   display: flex;
    //   flex-direction: column; /* 纵向排列 */
    //   align-items: left;
    //   justify-content: left;
    //   font-size: 14px;
    //   font-weight: 600;
    // }
    .card-wrap {
      display: flex;
      align-items: center;
      position: relative;
    }
    .card-margin {
      margin-bottom: 26px;
    }
    .card-remark {
      font-size: 12px;
      text-align: right;
    }
    .card-title {
      margin-left: 6px;
      // margin-right: 90px;
      display: flex;
      flex-direction: column; /* 纵向排列 */
      align-items: center; /* 水平居中 */
      justify-content: center;
    }
    // .unline {
    //   text-decoration: underline;
    // }
    .card-details-title {
      writing-mode: vertical-rl;
      text-orientation: mixed;
      letter-spacing: 8px; /* 调整字符间距 */
      font-size: 14px;
      color: #000;
    }
    .card-circle {
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 16px;
      font-weight: 400;
      color: #ffffff;
      height: 93px;
      width: 93px;
      border-radius: 50%;
      background-color: #212a7c;
      box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.2);
      z-index: 2;
      margin-left: 10px;
    }
    .card-small-circle {
      position: absolute;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 12px;
      // font-weight: 600;
      color: #000;
      height: 64px;
      width: 64px;
      border-radius: 50%;
      background-color: #e9e7f2;
      // box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.2);
      z-index: 1;
      right: 0;
    }
    .small-circle-value {
      font-weight: 500;
    }
    .circle-year-bg {
      background-color: #9286b4;
    }
    .circle-qoq-bg {
      background-color: #665c99;
    }
  }
  .info-dash-line {
    border-left: 1px dashed rgba(0, 0, 0, 0.5);
    // width: 1px;
    height: 19px;
    margin: 0 5px;
  }
  .card-solid-line {
    border-left: 1px solid rgba(0, 0, 0, 0.5);
    // width: 1px;
    height: 19px;
    margin: 0 25px;
  }
</style>
